<template>
    <div class="sidebar">
      <el-menu :default-active="$route.path"  class="el-menu-vertical-demo" unique-opened  router>
        <template v-for="bitem in billitem">
          <template v-if="bitem.sublist">
            <el-submenu  :index="bitem.index" :key="bitem.index">
              <template slot="title"><i :class="bitem.icon"></i>{{bitem.title}}</template>
              <el-menu-item  v-for="(subitem,myindex) in bitem.sublist" :index="subitem.topath" :key="myindex"  >
                {{subitem.title}}
              </el-menu-item>
            </el-submenu>
          </template>
          <template v-else>
            <el-menu-item  :index="bitem.index"  :key="bitem.index">
              <i  :class="bitem.icon"></i>
              {{bitem.title}}
            </el-menu-item>
          </template>
        </template>
      </el-menu>
    </div>
</template>

<script>
    export default {
        name: '',
        data: function () {
            return {
              billitem:[
                  {
                  icon: 'el-icon-menu',
                  index: '/Main',
                  title: '后台首页'
                },
                {
                  icon: 'el-icon-document',
                  index: '/Project/Projects',
                  title: '所有项目'
                },
                {
                  icon: 'el-icon-star-on',
                  index: 'User',
                  title: '用户管理',
                  sublist: [
                    {
                      topath: '/Customer',
                      title: '客户管理'
                    },
                    {
                      topath: '/User',
                      title: '用戶管理'
                    }
                  ]
                },
                {
                  icon: 'el-icon-more',
                  index: '/Other',
                  title: '其他'
                }
              ]
            }
        },
        computed: {
          onRoutes: function () {
            return this.$route.path.replace('/','');  //$route.path表示当前路由，:index能直接跳转路由
          }
        }
    }
</script>

<style scoped>
  .sidebar{
    position:absolute;
    display: block;
    width:200px;
    top:75px;
    left:0;
    bottom:0;
    background: #353d47;
    box-shadow: 1px 0px 10px rgba(0, 0, 0, .05);
  }
  
  .sidebar > ul {
    height:100%;
  }

</style>

